<template>
  <div>
     <el-dialog title="附件操作" :visible.sync="isView" width="30%">
       <p style="line-height:30px" v-for="(item,index) in currentFiles" :key="item+index">{{ item.frName }}  <el-button style="float:right;padding:3px;margin-top:4px" type="info" plain @click="downFile(item)">下载</el-button></p>
      <span slot="footer" class="dialog-footer">
        <el-button style="padding:8px 14px" plain type="info" @click="isView = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-table
      @row-click="viewTask"
      v-loading="loading"
      class="table"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
      border
      :data="tableData"
      style="width: 100%;max-height: 500px;overflow: hidden;overflow-y: scroll"
      :max-height="height"
    >
      <el-table-column align="center" v-if="isShowSelect" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" v-if="isShowIndex" type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        v-for="(item, index) in headers"
        :key="index"
        :label="item.label"
        :width="item.width"
        :property="item.key"
      >
        <template slot-scope="scope">
          <span v-if="item.dictionaries" style="color:red">
            <el-tag :color="scope.row[item.key] == 0 ? '#FF0000' : '#40E0D0'">
              <span style="color: white"> {{ getDicValue(scope.row[item.key]) }}</span>
            </el-tag>
          </span>
          <template v-else-if="item.hasOwnProperty('type') && item.type == 'input'">
            <el-input
              :style="{ width: item.elWidth }"
              max="100"
              v-model="scope.row[item.key]"
            ></el-input>
          </template>
          <span v-else-if="item.hasOwnProperty('percentage') && item.percentage">
            {{ getValue(scope.row[item.key], item.percentage) }}
          </span>
          <template v-else-if="item.hasOwnProperty('color') && item.color">
            <el-tag :color="scope.row.stateColor">
              <span style="color: white">{{ scope.row[item.key] }}</span>
            </el-tag>
          </template>
          <template v-else-if="item.hasOwnProperty('progress') && item.progress">
            <el-progress :percentage="scope.row[item.key] * 1"></el-progress>
          </template>
          <el-button style="padding:3px 5px" v-else-if="item.key=='taskrelevancedocument'" @click.stop="viewFile(scope.row)" type="success">操作</el-button>
          <span v-else>{{ scope.row[item.key] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isOperation && isOperationAuth"
        fixed="right"
        :width="operWidth"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <!--<a href="javascript:;" v-if="item.show" v-for="(item,index) in operations" :key="index" class="operation"><i
                            :class="item.icon" @click="clickOperation(scope.row,index)"></i></a>-->
          <el-button
            v-if="handleBtn(scope.row, item)"
            v-for="(item, index) in operations"
            :key="index"
            @click.stop="clickOperation(scope.row, index, item.key)"
            type="text"
            size="small"
          >
            {{ getLabel(scope.row, item.label) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { taskinfo } from "../../mixins/taskinfo";
import { deepClone } from "../../utils";

export default {
  name: "RxTable",
  mixins: [taskinfo],
  props: {
    height: {
      type: String,
      default: "250px",
    },
    isShowIndex: {
      type: Boolean,
      default: false,
    },
    isShowSelect: {
      type: Boolean,
      default: false,
    },
    isOperation: {
      type: Boolean,
      default: false,
    },
    //判断当前页面有多个table  作为table标识
    title: {
      type: String,
      default: "",
    },
    headers: {
      type: Array,
      default() {
        return [];
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    operations: {
      type: Array,
      default() {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
    isOperationAuth: {
      type: Boolean,
      default: true,
    },
    operWidth: {
      type: String,
      default: "100px",
    },
    isView: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 弹出框附件
      currentFiles: [],
      // 下载附件id
      id:''
    };
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 子任务查看详情
    viewTask(row){
      window.open(`/seeyon/bhtTask.do?taskId=${row.id}`)
    },
    // 下载附件
    downFile(it){
       window.location.href = encodeURI(`/seeyon/rest/attachment/file/${encodeURI(it.fileId)}?fileName=${encodeURI(it.frName)}`);
    },
    //查看附件弹出关闭
    closed(){
      this.isView = false
    },
    // // 任务汇总查看附件
    // viewFile(it){
    //   console.log(it)
    //   window.open(`/seeyon/doc.do?method=docOpenIframeOnlyId&openFrom=glwd&docResId=${it.taskrelevancedocument[0].fileId}&baseObjectId=${it.id}&baseApp=1`,'_blank')
    // },
    getInputVal(val) {
      return val;
    },
    getDicValue(val) {
      return val == 0 ? "新增数据" : "原有数据";
    },
    getValue(val, bool) {
      return bool ? (Number(val) * 100).toFixed(2) : Number(val).toFixed(2);
    },

    handleBtn(row, item) {
      if (this.title == "processes") {
        for (let key in row.operation) {
          if (item.key == key) {
            return row.operation[key];
          }
        }
      }
      return true;
    },

    getLabel(row, label) {
      if (!row.col) {
        if (label == "发起流程") {
          return "填写";
        }
        if (label == "查看模板") {
          return "查看";
        }
      } else {
        /* if (label == '查看流程') {
                         return '查看模板'
                     }*/
      }
      return label;
    },

    getData() {
      return this.tableData;
    },
    handleSelectionChange(val) {},
    //操作
    viewFile(item,event){
      this.isView = true
      this.currentFiles = item.taskrelevancedocument
      this.id = item.id
      event.stopPropagation();
      
    },
    clickOperation(row, index, key) {
      this.$emit("on-click-operation", row, index, key, this.title);
    },
  },
};
</script>

<style scoped>
.operation {
  font-size: 18px;
  display: inline-block;
  width: 50px;
}

.table /deep/ .el-input__inner {
  padding-left: 10px;
}
</style>
